
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
  .v-enter-from,
  .v-leave-to {
    opacity: 0;
    transform: translateX(50px);
  }

  .v-move,
  .v-enter-active,
  .v-leave-active {
    transition: all 1s linear 0s;
  }

  .v-leave-active {
    position: absolute;
  }
</style>
</head>

<body>
  <div id="app"></div>
  <template id="root">
    <div>
      <input type="text" v-model="taskName"><button @click="addTask">添加任务</button>
      <doing-component :doing-list="doingList" @complete-task="handleComplete"></doing-component>
      <done-component :done-list="doneList" @delete-task="handleDelete" ></done-component>
      <button @click="allDelete()">清空所有任务</button>
    </div>
  </template>
  <template id="doing">
    <div>
      未完成任务
      <transition-group>
        <li v-for="item in doingList" :key="item">
          {{item}}<button @click="completeTask(item)">完成</button>
        </li>
      </transition-group>
      </ul>
    </div>
  </template>
  <template id="done">
    <div>
      已完成任务
      <transition-group>
        <li v-for="item in doneList" :key="item">
          {{item}}<button @click="deleteTask(item)">删除</button>
        </li>
      </transition-group>
    </div>
  </template>
</body>
<script>
  const { ref } = Vue
  const app = Vue.createApp({
    template: "#root",
    setup() {
      const taskName = ref('')
      const doingList = ref([])
      const doneList = ref([])
      const addTask = () => {
        doingList.value.push(taskName.value)
      }
      const handleComplete = (item) => {
        doingList.value.splice(doingList.value.indexOf(item), 1)
        doneList.value.push(item)
      }
      const handleDelete = (item) => {
        doneList.value.splice(doneList.value.indexOf(item), 1)
      }
      const allDelete = ()=>{
        doingList.value=[],
        doneList.value=[]
      }
      return {
        taskName, addTask, doingList, doneList, handleComplete, handleDelete,allDelete
      }
    }
  })
  app.component('doingComponent', {
    template: "#doing",
    props: {
      doingList: Array
    },
    setup(props, { emit }) {
      const completeTask = (item) => {
        emit('completeTask', item)
      }
      return {
        completeTask
      }
    }
  })
  app.component('doneComponent', {
    template: "#done",
    props: {
      doneList: Array
    },
    setup(props, { emit }) {
      const deleteTask = (item) => {
        emit('deleteTask', item)
      }
      return {
        deleteTask
      }
    }
  })
  app.mount("#app")
</script>

</html>